import React from "react";
import styled from "styled-components";

import {
  comparisionColor,
  swapColor,
  sortedColor,
  pivotColor,
} from "./common/config";

import {
  ArrayHolder,
  ArrayItem,
  sourceAnimation,
  destinationAnimation,
} from "./common/styles";

export function ArrayContainer({
  array,
  source,
  destination,
    pivot = -1,
  highlightIndices = -1,
  sortedIndices = [],
                                   // eslint-disable-next-line no-empty-pattern
    swapped: [],
    swapTime,
    reset
}) {



    const Source = styled(ArrayItem)`
      animation: ${(props) => destinationAnimation(props.distance, swapColor)}
        ${() => swapTime / 1000}s forwards;
    `;

    const Destination = styled(ArrayItem)`
      animation: ${(props) => sourceAnimation(props.distance, swapColor)}
        ${() => swapTime / 1000}s forwards;
    `;
  function getBackgroundColor(i) {

    if (i === pivot) {
      return pivotColor;
    }

    if (highlightIndices === i) {
      return comparisionColor;
    }
    if (sortedIndices.includes(i)) {
      return sortedColor;
    }
    return "";
  }

  return (

      <ArrayHolder >
        {array.map((value, i) => {
          if (i === source && !reset) {
            return (
              <Source
                key={i + ":" + source + ":" + destination + ":" + value}
                distance={destination - source}
                style={{
                  order: destination,
                  backgroundColor: getBackgroundColor(i),
                }}
              >
                {value}
              </Source>
            );
          }
          if (i === destination && !reset) {
            return (
              <Destination
                key={i + ":" + destination + ":" + source + ":" + value}
                distance={destination - source}
                style={{
                  order: source,
                  backgroundColor: getBackgroundColor(i),
                }}
              >
                {value}
              </Destination>
            );
          }
          return (
                <ArrayItem
                  key={i + ":" + destination + ":" + source + ":" + value}
                  style={{
                    order: i,
                    backgroundColor: getBackgroundColor(i),
                  }}
                >
                  {value}
                </ArrayItem>

          );
        })}
      </ArrayHolder>

  );
}
